<template>
    <div class="nav">
        <div class="nav-inner">
            <div class="home_logo" @click="goTop"><img src="../../../assets/logo.png"></div>
            <div class="home_nav">
                <a 
                    href='javascript:;'
                    :class='{active: filterClass(item.classPath) }' 
                    v-for="(item, index) in indexColumn" 
                    :key="index"
                    @click.stop="navClick(item.classPath)">
                    <span class="name">
                        <span>{{item.name}}</span>
                    </span>
                </a>
            </div>
            <div class="home_more" @click="toChannel">
                <i class="list-shadow"></i>
                <img src="../../../assets/more.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import cache from '@/utils/cache'
export default {
    data() {
        return {
        }
    },
    computed: {
        ...mapState('index', [
            'indexActive',
            'indexColumn'
        ]),
        ...mapGetters('index', [
            'activeMeta'
        ])
    },
    watch: {
        indexActive() {
            this.slideTo(this.activeMeta.index)
        }
    },
    activated() {
        this.scrollRecover()
    },
    methods:{
        ...mapMutations('index', [
            'set_indexActive'
        ]),
        ...mapMutations('app', [
            'set_isShowLoginModal'
        ]),
        filterClass(classPath){
            if(this.indexActive == classPath){
                return true
            }else{
                return false
            }
        },
        // 自己实现导航栏滚动
        slideTo(index) {
            this.$nextTick(() => {
                let _container = $('.home_nav')           // 获取滚动容器元素
                let _column = $('.home_nav a').eq(index)  // 获取当前active栏目元素
                if (_column) {
                    let move    // 最终滚动值
                    let _container_width = _container.width()               // 容器宽度
                    let _container_left = _container.scrollLeft()           // 容器当前滚动条的值
                    let _column_width = _column.width()                     // 栏目宽度
                    
                    let _column_left = _column.position().left              // 栏目距离屏幕左边的距离
                    let midWidth = (_container_width - _column_width) / 2   // 屏幕中心线的宽度
                    // 容器滚动为0，并且active栏目位于中间线左边？滚动值为0 ：当前容器滚动值 + （active栏目相对于中间线的值，有正负）
                    if (_container_left === 0 && _column_left <= midWidth) {
                        move = 0
                    } else {
                        move = _container_left + (_column_left - midWidth)
                    }
                    _container.animate({ 'scrollLeft': move }, 300)
                    sessionStorage.setItem('navScrollLeft', move)       // 存计算后的值
                }
            })
        },
        // 滚动恢复
        scrollRecover() {
            let move = sessionStorage.getItem('navScrollLeft')          // 取计算后的值
            if (move) {
                this.$nextTick(() => {
                    $('.home_nav').scrollLeft(move)
                })
            }
        },
        navClick(type) {
            this.set_indexActive(type) // 点击栏目需要改变vuex内的indexActive值，这是为了与swiper联动
        },
        goTop() {
            $(`#view .${this.indexActive}`).animate({scrollTop: 0})
        },
        toChannel(){
            if(cache.getLocal('token')){
                this.$router.push('/channel')
            }else{
                this.set_isShowLoginModal(true)
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.nav{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: #fff;
    z-index: 200;
    .nav-inner{
        position: relative;
        height: 40px;
        padding-left:35px;
        padding-right:30px;
        .home_logo{
            width:30px;
            height:30px;
            display: inline-block;
            margin-top:5px;
            margin-left:5px;
            position:absolute;
            top:0;
            left:0;
        }
        .home_nav {
            height: 40px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
            font-size: 0;
            &::-webkit-scrollbar{
                width: 0px;
                height: 0px;
            }
            a{
                display:inline-block;
                margin: 0 5px;
                padding:0 3px;
                height: 40px;
                font-size: 17px;
                color: #999999;
                white-space: nowrap;
                text-decoration: none;
                &.active {
                    color: #5F88FF;
                    border-bottom: 2px solid #5F88FF;
                }
                .name{
                    width:100%;
                    height:40px;
                    display: table;
                    span{
                        display: table-cell;
                        vertical-align: middle;
                    }
                }
            }
        }
        .home_more{
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 40px;
            background: #fff;
            z-index: 9;
            .list-shadow{
                position: absolute;
                right: 100%;
                top: 0;
                width: 9px;
                height: 100%;
                background: url(../../../assets/shadow.png) no-repeat 100%;
                background-size: contain;
            }
            img{
                width:22px;
                height:22px;
                margin-top: 8px;
                margin-left: 3px;
            }
        }
    }
    
}
</style>